<template>
  <view class="my-purchanse">
    <u-sticky bgColor="#fff" z-index="99">
      <u-tabs :list="tabList" :current="tabIndex" :line-color="'#fe5815'" :active-style="{color: '#fe5815' }" :scrollable="false" @click="page.form.query.status = $event.id"></u-tabs>
    </u-sticky>
    <view class="p-main">
      <ljf-list-page :config="page.config" :form="page.form" :empty-img-url="'empty/order.png'" :empty-tip="'暂无订单'" ref="page">
        <template v-slot="{ listData }">
          <view style="height:90rpx"></view>
          <view class="p-item" :key="key" v-for="(item, key) in listData">
            <view class="i-title">
              <view class="i-sn">订单编号：{{ getObjVal(item,'sn') }}</view>
              <view class="i-status">{{ getObjVal(item,'status',0) | statusFilter }}</view>
            </view>
            <view class="i-info" @tap="nav(`/subpackage/order-form/pages/detail/index?id=${item.id}`)">
              <view class="i-info_top">
                <view class="t-left">
                  <ljf-img-loader  :url="getObjVal(item,'_raw.cover')"/>
                </view>
                <view class="t-right">
                  <view class="r-name">{{ getObjVal(item,'_raw.title') }}</view>
                  <view class="r-description">
                    <text>{{ getObjVal(item,'_raw.description') }}</text>
                    <text>x{{ getObjVal(item,'_raw.quantity') }}</text>
                  </view>
                  <view class="r-spec">
                    <text>规格：{{getObjVal(item,'specJson').find(v=>v.key === '颜色').value }}/{{getObjVal(item,'specJson').find(v=>v.key === '尺码').value}}</text>
                    <text>￥{{ getObjVal(item,'_raw.amountCost') }}</text>
                  </view>
                </view>
              </view>
              <view class="i-info_bottom">
                <text>共{{ getObjVal(item,'_raw.quantity') }}件商品</text>
                <text>订单金额</text>
                <text>￥{{ getObjVal(item,'_raw.amount') }}</text>
              </view>
            </view>
            <view class="i-btn">
              <view class="pay" v-if="item.status === 2">
                <view class="pay--time">
                  <view>剩余时间:</view>
                  <view class="minute">{{
                    now | minute($dayjs(item.paymentStartTime))
                  }}</view>
                  <view>:</view>
                  <view class="second">{{
                    now | second($dayjs(item.paymentStartTime))
                  }}</view>
                </view>
                <view class="pay--cancel" @tap="handleCancel(item.id)">取消订单</view>
                <view class="pay--go" @tap="goPay(item.sn)">去兑换</view>
              </view>
              <view v-if="item.status === 4" class="b-item">复制物流</view>
              <view v-if="item.status === 5" class="b-item" @tap="handleDelete(item.id)">删除订单</view>
            </view>
          </view>
          <view style="height:90rpx"></view>
        </template>
      </ljf-list-page>
    </view>
  </view>
</template>

<script>
import { model } from "@/model";
import { mapState } from "vuex";
const { OrderForm } = model.collection;

export default {
  data () {
    return {
      tabIndex: 0,
      tabList: [
        {
          name: '全部',
          id: ''
        },
        {
          name: '待支付',
          id: 2
        },
        {
          name: '待发货',
          id: 3
        },
        {
          name: '已完成',
          id: 4
        }
      ],
      page: {
        config: {
          entity: "OrderForm",
          action: "formPage",
          enablePull: true,
        },
        form: {
          query: {
            status: '',
          }
        },
      }
    };
  },
  onLoad (params) {
    const index = Number(params.index)
    this.tabIndex = index;
    if (index === 0) {
      this.page.form.query.status = '';
    }
    if (index === 1) {
      this.page.form.query.status = 2;
    }
    if (index === 2) {
      this.page.form.query.status = 3;
    }
    if (index === 3) {
      this.page.form.query.status = 4;
    }
  },
  computed: {
    ...mapState(["now"]),
  },
  filters: {
    statusFilter(v) {
      if(v===2) {
        return '待支付'
      }
      if(v===3) {
        return '待出库'
      }
      if(v===4) {
        return '已完成'
      }
      if(v===5) {
        return '取消'
      }
      return '--';
    },
    minute (now, paymentStartTime) {
      let expirationTime = ~~((paymentStartTime + 1800000 - now) / 1000);
      return `0${Math.max(~~((expirationTime / 60) % 60), 0)}`.slice(-2);
    },
    second (now, paymentStartTime) {
      let expirationTime = ~~((paymentStartTime + 1800000 - now) / 1000);
      return `0${Math.max(expirationTime % 60, 0)}`.slice(-2);
    },
  },
  methods: {
    handleDelete (id) {
      this.showModal('确认删除订单?', '', '确认', async() => {
        const res = await OrderForm.sendApi('formDelete', {
          params: {
            id
          },
          data: {}
        })
        if(res.status) {
          this.toast('订单删除成功');
          this.$refs.page.fresh();
        }else {
          this.toast('订单删除失败');
        }
      })
    },
    handleCancel (id) {
      this.showModal('是否取消订单?', '', '确认', async() => {
        const res = await OrderForm.sendApi('formCancel', {
          params: {
            id
          },
          data: {}
        })
        if(res.status) {
          this.toast('订单取消成功');
          this.$refs.page.fresh();
        }else {
          this.toast('订单取消失败');
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>
.my-purchanse {
  height: 100vh;
  background-color: #f7f7f7;
  
  .p-main {
    width: 100%;
    .p-item {
      width: 660rpx;
      padding: 20rpx;
      margin: 30rpx;
      background: #fff;
      border-radius: 20rpx;

      .i-title {
        height: 40rpx;
        margin-bottom: 70rpx;
        display: flex;
        justify-content: space-between;
        font-size: 32rpx;

        .i-sn {
          width: 500rpx;
          word-break: break-all;
          padding-left: 10rpx;
          font-weight: bold;
        }

        .i-status {
          font-size: 30rpx;
          color: #e79507;
        }
      }

      .i-info {
        margin-bottom: 15rpx;
        &_top {
          .layout_flex(@j:space-between);
          .t-left {
            width: 120rpx;
            height: 120rpx;
            margin-right: 10rpx;
            border-radius: 10rpx;
          }
          .t-right {
            flex: 1;
            .r-name {
              width: 480rpx;
              font-size: 28rpx;
              font-weight: 500;
              color: #333;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .r-description {
              .layout_flex(@j:space-between);
              margin: 10rpx 0;
              text {
                font-size: 24rpx;
                font-weight: 500;
                color: #999;
              }
            }
            .r-spec {
              .layout_flex(@j:space-between);
              text {
                &:nth-child(1) {
                  font-size: 24rpx;
                  font-weight: 500;
                  color: #666;
                }
                &:nth-child(2) {
                  font-size: 24rpx;
                  font-weight: 500;
                  color: #ff0000;
                }
              }
            }
          }
        }
        &_bottom {
          .layout_flex(@j:flex-end);
          margin: 30rpx 0;
          text {
            &:nth-child(1) {
              margin-right: 20rpx;
              font-size: 24rpx;
              font-weight: 500;
              color: #999;
            }
            &:nth-child(2) {
              font-size: 32rpx;
              font-weight: 500;
            }
            &:nth-child(3) {
              font-size: 32rpx;
              font-weight: 500;
              color: #ff0000;
            }
          }
        }
      }

      .i-btn {
        position: relative;
        .layout_flex(@j:flex-end);

        > .pay .pay--cancel,
        > .pay .pay--go,
        .b-item {
          width: 180rpx;
          height: 60rpx;
          margin-left: 20rpx;
          font-size: 30rpx;
          color: #666;
          text-align: center;
          line-height: 60rpx;
          border: 1rpx solid #999;
          border-radius: 30rpx;
        }

        .pay {
          display: flex;

          .pay--cancel {
            border: 1rpx solid #999;
            color: #666;
          }

          .pay--time {
            position: absolute;
            left: 0;
            .layout_flex();
            height: 100%;
            font-size: 26rpx;
            font-weight: 400;
            color: #f00;

            .minute {
              margin: 0 12rpx;
            }

            .second {
              margin-left: 12rpx;
            }

            .minute,
            .second {
              width: 40rpx;
              height: 40rpx;
              font-size: 30rpx;
              font-weight: bold;
              color: #f00;
              background: #ffe1e1;
              border-radius: 5rpx;
              line-height: 40rpx;
              border-radius: 5rpx;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
</style>